<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环 - 对象</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <h1>对象数组</h1>
      <ul>
        <li v-for="(item,index) in list">
          <div>{{(index+1) + "." + item.name}}</div>
          <div>{{item.num}}</div> 
        </li>
      </ul>
      <h1>对象属性</h1>
      <ul>
        <li v-for="(value,key,index) in person">
          {{(index+1) + ")" +key +":" + value}}
        </li>
      </ul>
      <h1>高级用法</h1>
      <button @click="sortAsc">逆序</button>
      <table width="100%">
        <tr>
          <th width="15%">方法</th>
          <th>说明</th>
        </tr>
        <tr v-for="item in methods">
          <td>{{item.funName}}</td>
          <td>{{item.funDesc}}</td>
        </tr>
      </table>
    </div>
  </body>

  <script>
    const App= {
      data(){
        return {
            list:[{
              name:"frank",
              num:"151xxxxxxxxx"
            },{
              name:"jjie",
              num:"151xxxxxxxxx"
            },{
              name:"ttian",
              num:"151xxxxxxxxx"
            },{
              name:"dduo",
              num:"151xxxxxxxxx"
            },{
              name:"llin",
              num:"151xxxxxxxxx"
            }],
            person:{
              name:"frank",
              age:"44",
              num:"151xxxxxxx",
              email:"frank@qq.com"
            },
            methods:[{
              "funName":"push()",
              "funDesc":"向列表尾部追加一个元素" 
            },{
              "funName":"pop()",
              "funDesc":"删除列表尾部的一个元素" 
            },{
              "funName":"shift()",
              "funDesc":"向列表头部追加一个元素" 
            },{
              "funName":"unshift()",
              "funDesc":"删除列表头部的一个元素" 
            },{
              "funName":"splice()",
              "funDesc":"对列表进行分割操作" 
            },{
              "funName":"sort()",
              "funDesc":"对列表进行排序操作" 
            },{
              "funName":"reverse()",
              "funDesc":"对列表进行逆序" 
            },
              
            ]
        }
      },
      methods:{
        sortAsc(){
          this.methods.reverse();
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>